<template>
  <div :style="{ height: height + 10 + 'px' }">
    <svg :id="'barcode' + value">code</svg>
  </div>
</template>

<script setup>
import { onMounted, nextTick } from 'vue'
import JsBarcode from 'jsbarcode'

const props = defineProps({
  value: {
    type: String,
    default: 'code'
  },
  height: {
    type: Number,
    default: 54
  },
  fontSize: {
    type: Number,
    default: 14
  },
  codeWidth: {
    type: Number,
    default: 1.4
  },
  margin: {
    type: Number,
    default: 2
  }
})
const initBarcode = () => {
  nextTick(() => {
    JsBarcode('#barcode' + props.value, String(props.value), {
      format: 'CODE128', //选择要使用的条形码类型
      width: props.codeWidth, //设置条之间的宽度
      height: props.height, //高度
      displayValue: true, //是否在条形码下方显示文字
      fontSize: props.fontSize, //设置文本的大小
      fontFamily: '宋体', //设置文本的字体
      margin: props.margin //设置条形码周围的空白边距
    })
  })
}
onMounted(() => {
  initBarcode()
})
watch(
  () => props.value,
  () => {
    initBarcode()
  }
)
</script>
